<template>
	<view class="gift">
		<view class="gift-image">
			<image :src="data.image" mode="aspectFill" @click="preview"></image>
		</view>
		<view class="gift__head">
			<view class="gift__head--num">
				<view class="gift__head--num-left">
					<view class="gift__head--num-left-score" :class="data.isLimit || data.isNone ? 'font-disabled' : ''">{{data.CostScore}}</view>
					<view class="gift__head--num-left-text">积分</view>
				</view>
				<view class="gift__head--num-right">
					<text style="margin-right: 10rpx;">库存</text>
					<text>{{data.stock}}</text>
				</view>
			</view>
			<view class="gift__head--limit">
				<view class="gift__head--limit-text" :class="data.isLimit || data.isNone ? 'disabled' : ''">
					<text style="margin-right: 5rpx;">每人限购</text>
					<text>{{data.MyApplyNum}}/{{data.UserLimit}}</text>
				</view>
				<view class="tag" :class="data.isLimit || data.isNone ? 'disabled' : ''" v-if="data.startTime !== true">即将开放</view>
			</view>
			<view class="gift__head--title">
				<text>{{data.GiftName}}</text>
				<text v-if="data.GiftName && data.BatchScale">*</text>
				<text>{{data.BatchScale}}</text>
			</view>
		</view>
		<u-gap height="10" bgColor="#eee"></u-gap>
		<view class="gift__body">
			<view class="gift__body--item">
				<text class="gift__body--item-des">礼品规格：</text>
				<text>{{data.BatchScale}}</text>
			</view>
			<view class="gift__body--item">
				<text class="gift__body--item-des">礼品描述：</text>
				<text>{{data.BatchDesc}}</text>
			</view>
			<view class="gift__body--item">
				<text class="gift__body--item-des">发货说明：</text>
				<text>兑换申请发起后，审核人会尽快审核并发货，并将快递号写在申请流程中</text>
			</view>
			<view class="gift__body--item"  :style="data.isLimit || data.isNone ? '' : 'color: #fa3534'">*注：同类型礼品共用兑换限额</view>
		</view>
		<view class="gift__bottom">
			<u-button type="primary" disabled :customStyle="{color: '#8c8c8c',fontWeight: 'bold'}" color="#d9d9d9" text="已售罄" v-if="data.isNone"></u-button>
			<u-button type="primary" disabled :customStyle="{color: '#8c8c8c',fontWeight: 'bold'}" color="#d9d9d9" text="限购次数已用尽" v-else-if="data.isLimit"></u-button>
			<u-button type="primary" color="#2979ff" text="立即兑换" @click="submit" v-else-if="data.startTime === true"></u-button>
			<u-button type="primary" disabled :customStyle="{color: '#8c8c8c',fontWeight: 'bold'}" color="#d9d9d9" :text="data.startTime" v-else></u-button>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import { formatImg,futureTimestampFormat } from '@/common/custom_util.js';
	
	export default {
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				id: '',//商品id
				data: {},//商品信息
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getSubjectGiftDetail();
		},
		methods: {
			/**
			 * 获取礼品详情
			 */
			getSubjectGiftDetail() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectGiftDetail',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						giftbatchid: this.id
					},
					success(res) {
						if(!res.length) return
						let data = res[0];
						data.stock = data.BatchNum*1 - data.ApplyNum*1;
						data.isNone = data.stock == 0;
						data.isLimit = data.UserLimit == data.MyApplyNum;
						data.image = formatImg(data.BatchImage);
						data.startTime = futureTimestampFormat(data.StartTime);
						if(data.startTime !== true) {
							data.startTime = data.startTime + '开放兑换'
						}
						that.data = data;
					},
				})
			},
			preview(v) {
				uni.previewImage({
					urls: [this.data.image]
				})
			},
			submit() {
				uni.navigateTo({
					url: '/pages/home/child/subject-gift-apply/index?id=' + this.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.gift {
		position: relative;
		
		&-image {
			height: 40vh;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		&__head {
			
			&--num {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				
				&-left {
					font-size: 30rpx;
					color: #bfbfbf;
					display: flex;
					
					&-score {
						font-size: 40rpx;
						color: #fa8c16;
						line-height: 40rpx;
					}
					
					&-text {
						margin-left: 10rpx;
						font-size: 25rpx;
						line-height: 50rpx;
					}
				}
				
				&-right {
					font-size: 27rpx;
					color: #aaa;
				}
			}
			
			&--limit {
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				
				&-text {
					padding: 3rpx 8rpx;
					background-color: #ff7a45;
					border-radius: 10rpx;
					color: #fff;
					font-size: 25rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
			
			&--title {
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 35rpx;
				color: #000;
				font-weight: bold;
			}
		}
		
		&__body {
			padding: 20rpx;
			
			&--item {
				color: #909399;
				
				&-des {
					font-weight: bold;
					color: #82848a;
				}
			}
		}
		
		&__bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx;
			background-color: #fff;
		}
	}
	
	.tag {
		background-color: #4096ff;
		padding: 3rpx 8rpx;
		color: #fff;
		font-size: 25rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.disabled {
		background-color: #bfbfbf;
		color: #fff;
	}
	
	.font-disabled {
		color: #8c8c8c;
	}
	
	.gift__bottom /deep/ .u-button__text {
		font-size: 35rpx !important;
	}
</style>
